<template>
	<div class="home">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>金额统计</span>
				<div class="clearfix-right">
					选择初始日期<el-date-picker :picker-options="pickerOptionsStart" @change="handleChange" v-model="date"
						:clearable="false" :editable="false" type="date" placeholder="选择初始日期">
					</el-date-picker>
					选择终止日期<el-date-picker :picker-options="pickerOptionsEnd" @change="handleChange1" v-model="date1"
						:clearable="false" :editable="false" type="date" placeholder="选择终止日期">
					</el-date-picker>
				</div>
			</div>
			<div class="public">
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">购物券总额</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.voucherTotalAmount }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">鸡蛋总额</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.dynamicPointsTotalAmount }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">认养券总额</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.managePointsTotalAmount }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">健康分总额</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.staticPointsTotalAmount }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">股权总额</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.signInPointsTotalAmount }}</div>
				</div>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>充值统计</span>
			</div>
			<div class="public">
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">充值总金额</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.todayRechargeSumPrice }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">微信充值金额</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.todayWeChatRechargePrice }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">支付宝充值金额</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.todayAliPayRechargePrice }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">对公转账充值金额</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi2">
						{{ HomeList.todayPublicTransferRechargePrice }}
					</div>
				</div>
			</div>
		</el-card>

		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>订单统计</span>
			</div>
			<div class="public">
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">新增领养总数</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi2">{{ HomeList.todayNewOrder }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">新增健康分兑换总数</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi2">{{ HomeList.todayNewStoreOrder }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">领取鸡蛋总数</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi2">{{ HomeList.todayNewExchangeOrder }}</div>
				</div>
				<!-- <div class="public_css">
          <div class="public_css_pu">
            <div class="public_css_title">今日新增礼包订单</div>
            <div class="public_css_circle">实时</div>
          </div>
          <div class="shuzi2">{{ HomeList.todayNewBonusOrder }}</div>
        </div> -->
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>会员统计汇报</span>
			</div>
			<div class="public">
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">平台总人数</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.platformSumNumber }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">平台总激活</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.platformSumActivate }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">新增注册</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.todayNewRegister }}</div>
				</div>
			</div>
		</el-card>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>收益统计</span>
			</div>
			<div class="public">
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">下蛋总额</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">{{ HomeList.yesterdaySumReleasePoints }}</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">总直推收益</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">
						{{ HomeList.yesterdaySumReleaseStaticPoints }}
					</div>
				</div>
				<div class="public_css">
					<div class="public_css_pu">
						<div class="public_css_title">总团队收益</div>
						<div class="public_css_circle">实时</div>
					</div>
					<div class="shuzi">
						{{ HomeList.yesterdaySumReleaseTeamPoints }}
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
	import * as HomeApi from "@/api/PublicSearch";
	import {
		timestampToTime
	} from "@/utils/date"
	export default {
		data() {
			return {
				HomeList: {},
				keyList: [],
				date: new Date(),
				date1: new Date(),
				createDate: new Date().getTime(),
				// 开始时间限制
				pickerOptionsStart: {
					disabledDate: (time) => {
						if (this.date1) {
							// eslint-disable-next-line max-len
							return time.getTime() > new Date(this.date1).getTime() || time.getTime() >
								new Date(this.createDate).getTime();
						}
						return time.getTime() <= new Date(this.createDate).getTime();
					},
				},
				// 结束时间限制
				pickerOptionsEnd: {
					disabledDate: (time) => {
						if (this.date) {
							return time.getTime() <= new Date(this.date).getTime() - 864000 || time.getTime() >
								new Date(this.createDate).getTime() + 864000;
						}
						return time.getTime() <= new Date(this.createDate).getTime();
					},
				},
			};
		},
		methods: {
			handleChange(e) {
				this.SearchMoney()
			},
			handleChange1(e) {
				this.SearchMoney()
			},
			handleClick(tab, event) {
				// console.log(tab, event);
			},
			SearchMoney() {
				let time = timestampToTime(this.date)
				let endTime = timestampToTime(this.date1)
				HomeApi.HomeSearch({
					time: time,
					endTime: endTime
				}).then((res) => {
					this.HomeList = res.data;
					for (var key in this.HomeList) {
						// console.log(this.HomeList[key]);
						if (this.HomeList[key] === null) {
							this.HomeList[key] = 0;
						}
					}
				});
				// HomeApi.getMemberAccount().then(res=>{
				//   console.log(res);
				// })
			},
		},
		mounted() {
			this.SearchMoney();
			setTimeout(() => {
				this.SearchMoney();
			}, 10000);
			// this.SearchPeople();
			// this.SearchShop();
			// this.SearchAddShop();
			// homeApi.homeList({ username: "12312312" }).then((res) => {
			//   console.log(res);
			// });
		},
	};
</script>

<style lang="scss" scoped>
	.shuzi {
		margin-top: 10px;
		width: 100%;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 44px;
		height: 99px;
	}

	.shuzi2 {
		margin-top: 10px;
		width: 100%;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 44px;
		height: 99px;
	}

	.public {
		display: flex;
		justify-content: space-around;
	}

	.public_css {
		width: 19%;
		height: 160px;
		background-color: rgb(240, 232, 232);
	}

	.home {
		margin-top: 10px;
		margin-left: 10px;
	}

	.box-card {
		width: 99%;
		margin-top: 10px;
	}

	span {
		font-size: 20px;
		font-weight: 600;
	}

	.public_css_pu {
		margin-top: 30px;
		display: flex;
		justify-content: space-between;
	}

	.public_css_title {
		font-size: 17px;
		font-weight: 600;
		margin-left: 10px;
	}

	.public_css_circle {
		border-radius: 10px;
		background-color: blue;
		margin-right: 10px;
		width: 60px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		color: white;
		font-weight: 600;
		font-size: 16px;
	}

	.clearfix {
		display: flex;
		align-items: center;

		&-right {
			margin-left: auto;

			.el-date-editor {
				margin-left: 10px;
			}
		}
	}
</style>
